<template>
  <div>
    <h1>Toolbars（工具栏）</h1>
    <br />
    <p>
      v-toolbar组件对于任何gui都是至关重要的，因为它通常是站点导航的主要来源。
      工具栏组件与v-navigation-drawer和v-card 配合使用非常有效。
    </p>
    <br />
    <br />
    <h2>常用属性</h2>
    <p>v-app-bar 组件用于应用程序范围内的操作和信息。</p>
    <ul class="font-weight-black">
      <li>DENSE : 缩窄模式</li>
      <li>FLAT : 平铺模式</li>
      <li>PROMINENT : 凸显加宽模式</li>
    </ul>
    <br />
    <h2>属性</h2>
    <br />

    <h3>背景</h3>
    <p>
      工具栏可以使用 src 属性显示背景而不是纯色。 这可以通过使用 img
      插槽并提供您自己的v-img组件来修改。 可以使用v-app-bar 使背景淡入淡出
    </p>
    <div>
      <v-toolbar dark prominent src="../assets/logo.svg">
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Vuetify</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-export</v-icon>
        </v-btn>
      </v-toolbar>
    </div>
    <br />

    <h3>折叠</h3>
    <p>可以折叠工具栏以节省屏幕空间。</p>
    <v-card color="grey lighten-4" flat height="200px" tile>
      <v-toolbar collapse>
        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-toolbar>
    </v-card>
    <br />

    <h3>扩展</h3>
    <p>工具栏可以在不使用 扩展 插槽的情况下扩展。extended属性</p>
    <v-card color="grey lighten-4" flat height="200px" tile>
      <v-toolbar extended>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-toolbar>
    </v-card>
    <br />

    <h3>扩展高度</h3>
    <p>扩展的高度可以定制。extension-height="100"设置扩展高度为100</p>
    <v-card color="grey lighten-4" flat height="200px" tile>
      <v-toolbar extended extension-height="100">
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-toolbar>
    </v-card>
    <br />

    <h3>浮动</h3>
    <p>
      浮动工具栏变成内联元素，只占用所需空间的。
      这在将工具栏放置在内容上时特别有用。
    </p>
    <v-card
      class="pa-4"
      flat
      height="300px"
      v-bind:img="require('../assets/bg-2.jpg')"
    >
      <v-toolbar dense floating>
        <v-text-field
          hide-details
          prepend-icon="mdi-magnify"
          single-line
        ></v-text-field>

        <v-btn icon>
          <v-icon>mdi-crosshairs-gps</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-toolbar>
    </v-card>
    <br />

    <h3>浅色和深色</h3>
    <p>
      工具栏有 2 种变体，浅色和深色。
      浅色工具栏具有深色按钮和深色文本，而深色工具栏具有白色按钮和白色文本。
    </p>
    <v-card flat>
      <v-container fluid>
        <v-row class="child-flex">
          <div>
            <v-toolbar>
              <v-btn icon class="hidden-xs-only">
                <v-icon>mdi-arrow-left</v-icon>
              </v-btn>

              <v-toolbar-title>Title</v-toolbar-title>

              <v-spacer></v-spacer>

              <v-btn icon class="hidden-xs-only">
                <v-icon>mdi-magnify</v-icon>
              </v-btn>
            </v-toolbar>
          </div>

          <div style="flex-basis: 20%">
            <v-toolbar dark>
              <v-spacer></v-spacer>

              <v-btn icon>
                <v-icon>mdi-reply</v-icon>
              </v-btn>

              <v-btn icon>
                <v-icon>mdi-dots-vertical</v-icon>
              </v-btn>
            </v-toolbar>
          </div>
        </v-row>
      </v-container>
    </v-card>
    <br />

    <h3>突出的工具栏</h3>
    <p>
      突出的工具栏将 v-toolbar 的高度增加到 128px ，并将 v-toolbar-title
      放置到容器底部。 在 v-app 中扩展了这个功能，能够将 prominent
      的工具栏缩小到 紧凑 工具栏或 短 工具栏。
    </p>
    <v-card color="grey lighten-4" flat height="200px" tile>
      <v-toolbar prominent extended>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>

        <v-toolbar-title>Title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-heart</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-toolbar>
    </v-card>
    <br />

    <h2>其他</h2>
    <br />
    <h3>上下文操作栏</h3>
    <p>
      可以更新工具栏的外观以响应应用程序状态的改变。
      在本例中，工具栏的颜色和内容会随着用户在 v-select 中的选择而改变。
    </p>
    <v-card max-width="500" class="mx-auto">
      <v-toolbar
        :color="selection.length ? 'grey darken-4' : 'deep-purple accent-4'"
        dark
      >
        <v-app-bar-nav-icon v-if="!selection.length"></v-app-bar-nav-icon>
        <v-btn v-else icon @click="selection = []">
          <v-icon>mdi-close</v-icon>
        </v-btn>

        <v-toolbar-title>
          {{ selection.length ? `${selection.length} selected` : "Photos" }}
        </v-toolbar-title>

        <v-spacer></v-spacer>

        <v-scale-transition>
          <v-btn v-if="selection.length" key="export" icon>
            <v-icon>mdi-export-variant</v-icon>
          </v-btn>
        </v-scale-transition>
        <v-scale-transition>
          <v-btn v-if="selection.length" key="delete" icon>
            <v-icon>mdi-delete</v-icon>
          </v-btn>
        </v-scale-transition>

        <v-btn icon>
          <v-icon>mdi-dots-vertical</v-icon>
        </v-btn>
      </v-toolbar>

      <v-card-text>
        <v-select
          v-model="selection"
          :items="items"
          multiple
          label="Select an option"
        ></v-select>
      </v-card-text>
    </v-card>
    <br />

    <h3>灵活的卡片工具栏</h3>
    <p>在本例中，我们使用 extended prop 将卡片偏移到工具栏的扩展内容区域。</p>
    <v-card flat>
      <v-toolbar color="primary" dark extended flat>
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
      </v-toolbar>

      <v-card class="mx-auto" max-width="700" style="margin-top: -64px">
        <v-toolbar flat>
          <v-toolbar-title class="grey--text"> Title </v-toolbar-title>

          <v-spacer></v-spacer>

          <v-btn icon>
            <v-icon>mdi-magnify</v-icon>
          </v-btn>

          <v-btn icon>
            <v-icon>mdi-apps</v-icon>
          </v-btn>

          <v-btn icon>
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </v-toolbar>

        <v-divider></v-divider>

        <v-card-text style="height: 200px"></v-card-text>
      </v-card>
    </v-card>
    <br />

    <h3>变量</h3>
    <p>
      v-toolbar 有多个变量，可以应用主题和辅助类。
      这些主题包括浅色和深色的主题、彩色和透明。
    </p>
    <v-row>
      <v-col
        v-for="(bar, i) in bars"
        :key="i"
        cols="12"
        sm="12"
        md="6"
        class="my-4"
      >
        <v-card color="grey lighten-4" flat height="200px">
          <v-toolbar :color="bar.class" :dark="bar.dark">
            <v-app-bar-nav-icon></v-app-bar-nav-icon>
            <v-toolbar-title>Title</v-toolbar-title>
            <v-spacer></v-spacer>
            <v-btn icon>
              <v-icon>mdi-magnify</v-icon>
            </v-btn>
            <v-btn icon>
              <v-icon>mdi-heart</v-icon>
            </v-btn>
            <v-btn icon>
              <v-icon>mdi-dots-vertical</v-icon>
            </v-btn>
          </v-toolbar>
        </v-card>
      </v-col>
    </v-row>
    <br />
    <h3></h3>
    <p></p>
    <br />
  </div>
</template>

<script>
export default {
  data: () => ({
    imgurl_bg2: require("../assets/bg-2.jpg"),
    selection: [],
    items: ["Foo", "Bar", "Fizz", "Buzz"],
    bars: [
      { class: "" },
      { class: "", dark: true },
      { class: "primary", dark: true },
      { class: "elevation-0" },
    ],
  }),
};
</script>
